<template>
  <div class="clipboard-share">
    <!-- 顶部工具栏 -->
    <el-header>
      <el-menu mode="horizontal">
        <el-menu-item index="1">本地历史</el-menu-item>
        <el-menu-item index="2">共享记录</el-menu-item>
        <el-menu-item index="3">设置</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 主内容区 -->
    <el-main>
      <!-- 剪贴板内容列表 -->
      <el-table :data="clipboardHistory">
        <el-table-column prop="timestamp" label="时间" width="180">
          <template #default="{ row }">
            {{ formatTime(row.timestamp) }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeColor(row.type)">{{ row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容">
          <template #default="{ row }">
            <clipboard-content :item="row" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button-group>
              <el-button @click="copyToClipboard(row)">复制</el-button>
              <el-button @click="shareContent(row)">分享</el-button>
              <el-button @click="deleteItem(row)" type="danger">删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <!-- 分享对话框 -->
    <el-dialog v-model="shareDialogVisible" title="分享内容">
      <el-form>
        <el-form-item label="访问密码">
          <el-input v-model="sharePassword" placeholder="可选" />
        </el-form-item>
        <el-form-item label="有效期">
          <el-select v-model="shareExpiry">
            <el-option label="1小时" value="1h" />
            <el-option label="24小时" value="24h" />
            <el-option label="7天" value="7d" />
            <el-option label="永久" value="never" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="shareDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="generateShareLink">生成链接</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ClipboardContent from '../components/ClipboardContent.vue'
import { useClipboardStore } from '../stores/clipboard'
import { formatTime, getTypeColor } from '../utils/format'
import type { CustomClipboardItem } from '../types/clipboard'

const store = useClipboardStore()
const clipboardHistory = ref<CustomClipboardItem[]>([])
const shareDialogVisible = ref(false)
const sharePassword = ref('')
const shareExpiry = ref('24h')
const selectedItem = ref<CustomClipboardItem | null>(null)

// 监听剪贴板变化
onMounted(() => {
  // 初始化数据
  store.initHistory()
  
  // 监听剪贴板变化
  setInterval(() => {
    const content = window.clipboardAPI.getClipboard()
    if (content) {
      store.addItem({
        ...content,
        id: Date.now().toString(),
        timestamp: Date.now(),
        deviceId: store.deviceId
      })
    }
  }, 1000)
})

// 复制到剪贴板
const copyToClipboard = (item: CustomClipboardItem) => {
  window.clipboardAPI.setClipboard(item)
  ElMessage.success('已复制到剪贴板')
}

// 分享内容
const shareContent = (item: CustomClipboardItem) => {
  selectedItem.value = item
  shareDialogVisible.value = true
}

// 生成分享链接
const generateShareLink = async () => {
  if (!selectedItem.value) return
  
  try {
    const link = await store.shareItem({
      item: selectedItem.value,
      password: sharePassword.value,
      expiry: shareExpiry.value
    })
    
    // 复制链接到剪贴板
    await navigator.clipboard.writeText(link)
    ElMessage.success('分享链接已复制到剪贴板')
    shareDialogVisible.value = false
  } catch (error) {
    ElMessage.error('生成分享链接失败')
  }
}

const deleteItem = async (item: CustomClipboardItem) => {
  await store.removeHistoryItem(item.id)
  clipboardHistory.value = clipboardHistory.value.filter(i => i.id !== item.id)
}
</script>

<style scoped>
.clipboard-share {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.el-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style> 